<template>
    <div id="UserInfo" class="common-detail user-info">
        <div class="container">
            <div class="detail-con">
                <div class="detail-item">
                    <div class="item-label">账号：</div>
                    <div class="item-value">{{userInfo.account}}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">姓名：</div>
                    <div class="item-value">{{userInfo.memberName}}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">电话：</div>
                    <div class="item-value">{{userInfo.memberPhone?userInfo.memberPhone:'--'}}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">角色：</div>
                    <div class="item-value">{{userInfo.roleName}}</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">密码：</div>
                    <div class="item-value">*******<a href="javascript:;" class="link-btn" @click="showEditVisible" v-if="false">修改密码</a></div>
                    <!-- v-permission="148" -->
                </div>
            </div>
        </div>
        <common-dialog
            :rows="rows"
            :form="form"
            :labelWidth="80"
            title="修改密码"
            :visible="editVisible"
            @hideDialog="hideEditVisible"
            @confirm="updateUserPwd" />
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import rules from '@/util/rules'
import md5 from 'js-md5'
import util from '@/util/util'

@Component
export default class UserInfo extends Vue {
    editVisible: boolean = false
    userInfo: any = {}
    form: any = {
        old_pwd: '',
        new_pwd: ''
    }
    rows: any = {
        old_pwd: {
            label: '旧密码',
            type: 'password',
            placeholder: '请输入旧密码',
            rules: [
                {validator: rules.checkLenInterval(6, 12), trigger: 'blur'},
                {min: 6, message: '旧密码至少6位数字', trigger: 'blur'},
                {required: true, message: '旧密码至少6位数字', trigger: 'blur'}
            ]
        },
        new_pwd: {
            label: '新密码',
            type: 'password',
            placeholder: '请输入新密码',
            rules: [
                {validator: rules.checkLenInterval(6, 12), trigger: 'blur'},
                {min: 6, message: '新密码至少6位数字', trigger: 'blur'},
                {required: true, message: '新密码至少6位数字', trigger: 'blur'}
            ]
        }
    }

    init () {
        this.getPersonalInfo()
    }
    async getPersonalInfo () {
        let data = {
            adminId: JSON.parse(localStorage.getItem('userInfo') || '{}').adminId
        }
        let res = await this.$api.memberDetailFetch(data)
        this.userInfo = res.data
    }
    showEditVisible () {
        this.form = {
            old_pwd: '',
            new_pwd: ''
        }
        this.editVisible = true
    }
    hideEditVisible () {
        this.editVisible = false
    }
    updateUserPwd () {
        let { old_pwd, new_pwd } = this.form
        let data = {
            old_pwd: md5(old_pwd),
            new_pwd: md5(new_pwd)
        }
        this.$api.adminUpdatePwdFetch(data).then((res: any) => {
            this.$message.success('修改成功')
            this.editVisible = false
            this.getPersonalInfo()
        })
    }
}
</script>

<style lang="scss">

</style>
